@CHARSET "UTF-8";
*{ 
	margin:0;
	padding:0;
}
 body{  /*设置整体浏览器窗口*/
 width:100%;
 height:100%;
 background:url("../images/bg.jpg") #100d1e no-repeat;
 /* background-size:100% 100%; */
 }
 .box{
 position:relative;
 top:50%;
 left:50%;
 margin-left:-130px;
 margin-top:-300px;
 box-shadow:0 0 50px #2f5e78 inset;
 /*box-shadow 属性向框添加一个或多个阴影。  默认是外阴影  
阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影模糊值（大小）    阴影的颜色 
 内阴影：inset 可以设置成内部阴影
 如果X轴与Y轴为正值（则阴影 向右 向下）
 */
 width:500px;
 height:600px;
 border-radius:20px; /*向 div 元素添加圆角边框：*/
 background:rgba(43,40,54,0.4);
 /*前三个值（红绿蓝）的范围为0到255之间的整数或者0%到100%之间的百分数。
 这些值描述了红绿蓝三原色在预期色彩中的量。
第四个值，alpha值，制定了色彩的透明度/不透明度，它的范围为0.0到1.0之间,0.5为半透明。*/
  }
  .header{ /*设置聊天窗口的头部*/
  border-top-left-radius:20px;/*左上圆角*/
  border-top-right-radius:20px;/*右上圆角*/
  background:#2f5e78
  }
  .header img{ 
  width:300px;
  height:60px;
  margin-left:30px;
  }
  .header span{/*设置24小时智能服务字体*/
  font-size:20px;
  color:#d6d7d9;
  font-weight:bolder
  }
  
  #res{
  overflow-y:auto;/*裁剪 div 元素中内容溢出区域的情况，auto如果溢出框，则应该提供滚动机制。*/
  height:400px;
  width:95%;
  margin:0 auto;
  }
  #res .mbox{/*设置聊天显示对话的窗口*/
  overflow:hidden; /*内容过多不会撑大div，会隐藏*/
  }
  #res img{/*机器人回复的头像*/
  width:40px;
  height:40px;
  border-radius:40px;
  vertical-align:middle;/*让文字位于图片的中部*/
  margin-right:5px;
  }
  #res .userInfo,#res .robotInfo{
  width:55%;
  border-radius:10px;
  margin:5px 0 5px 0;
  padding:5px;
  }
  #res div.userInfo{
  background:#94C248;
  float:right;
  }
  #res div.robotInfo{
  background:#237BC0;
  color:#fff;
  float:left
  }
  
  .chatArea{/*设置用户输入框*/
  width:100%;
  position:absolute; 
  bottom:0px;
  }
  .chatArea textarea{
  height:100px;
  width:100%;
  }
  .chatArea input[type=button]{
  float:right;
  width:80px;
  height:30px;
  color:#fff;
  border:none;
  background:#237BC0;
  border-radius:5px;
  margin:3px;
  margin-right:30px;
   }